<template>
  <div class="login_form_wrap">
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="ruleForm"
    >
      <el-form-item prop="username">
        <el-input v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password"></el-input>
      </el-form-item>
      <div class="forget_warp">
        <nuxt-link to="#">忘记密码?</nuxt-link>
      </div>
      <el-form-item>
        <el-button
          type="primary"
          class="login_btn"
          @click="submitLogin"
        >登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data: () => ({
    // 登录表单  真实的数据
    loginForm: {
      username: "admin",
      password: "admin",
    },
    // 表单对应的验证规则
    ruleForm: {
      username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
      password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    },
  }),
  methods: {
    // 点击登录按钮
    submitLogin() {
      // 1 验证输入是否合法  利用了element内置整个表单的验证功能
      this.$refs.loginForm.validate(async (valid) => {

        if (valid) {
          //  2 通过调用 vuex中的action来完成   发送请求 到后台实现 登录
          // post("地址",{username:123})

          await this.$store.dispatch("user/login", this.loginForm);

          // 3 给出用户提示
          this.$message({
            message: "登录成功",
            type: "success",
            duration: 1500,
          });
          // 4 等待一会 再跳转页面
          setTimeout(() => {
            const { fullPath } = this.$route.query;
 
            if (fullPath) {
              this.$router.replace(fullPath);
            } else {
              this.$router.replace("/");
            }
          }, 1500);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less"  scoped >
.login_form_wrap {
  padding: 25px;

  .forget_warp {
    text-align: right;
    padding-bottom: 10px;
    a {
      color: #66b1ff;
      font-size: 12px;
    }
  }
  .login_btn {
    width: 100%;
  }
}
</style>